import React from 'react';
import {Button, message, Table, Card, Spin} from 'antd';
import { connect } from 'dva';
import { createModalContainer } from '@/components/changeModal';


class ReportFormComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            visible2: false,
            data: [],
            pagination: {
                showSizeChanger: true,
                showTotal: total => `共 ${total} 条记录`,
                pageSize: 8,
                total: 0,
            },
            pageIndex: 1,
        }
    }

    componentWillMount() {
        this.getTaskList();
        window.Isoption = false;
    }
      componentDidMount() {
        window.Isoption = true;
      }

      // 取消
      handleCancel =() => {
        this.props.cancel();
    }


    getTaskList =() => {
        const { dispatch} = this.props;
        const {pageIndex} = this.state;
        dispatch({
            type: 'orderList/GetTaskList',
            payload: {
                TaskType: this.props.param.TaskType,
                PageIndex: pageIndex,
                PageSize: this.state.pagination['pageSize']
            },
            callBack: {
                success: res => {
                    if(res.Code===0) {
                        this.setState({
                            data: res.Data,
                            pagination: {
                                pageSize: this.state.pagination['pageSize'],
                                current: pageIndex,
                                total: res.Data.Total,
                                showSizeChanger: true,
                                showTotal: total => `共 ${total} 条记录`,
                              },
                        })
                    }
                },
                error: res=> {
                    message.error(res.Msg)
                }
            }
        })
    }



    //tab切换
    onTableChange =(pagination, filters, sorter) => {
        this.setState({
            pagination: {
                pageSize: pagination.pageSize,
                total: pagination.total,
                showSizeChanger: true,
                showTotal: total => `共 ${total} 条记录`,
            },
            pageIndex: pagination.current,
        }, () => {
            this.getTaskList();
        }
    )}


    render() {
      const columns = [{
        title: '任务名称',
        dataIndex: 'TaskName',
        key: 'TaskName',
      }, {
        title: '申请人',
        dataIndex: 'Operator',
        key: 'Operator',
      }, {
        title: '申请时间',
        dataIndex: 'CreateTime',
        key: 'CreateTime',
        align: 'right'
      }, {
        title: '操作',
        key: 'action',
        width: 80,
        align: 'right',
        render: (text, record) => {
            if(record.State===2) {
                return (
                <span>
                    <a href={record.ExportFileUrl} download>下载</a>
                </span>
              )
            }else {
                return <span style={{opacity: .5}}>{record.StateName}</span>
            }
        },
      }];
      const {loading2} = this.props;
      const { data } = this.state;
        return (
            <Spin spinning={loading2}>
                <Card bordered={false}>
                    <Table
                        columns={columns}
                        dataSource={data.DataList?data.DataList:[]}
                        rowKey={record => record.Id}
                        bordered
                        onChange={this.onTableChange}
                        pagination={this.state.pagination}
                    />
                </Card>         
                <div className="xkd-model-footBtn">
                    <Button type="primary" htmlType="submit" onClick = {this.handleCancel}>
                        确认
                    </Button>
                </div>
            </Spin>
     
        )
    }
}

const ReportForm = createModalContainer(
    connect(({orderList, global, loading}) =>({
        orderList,
        loading2: loading.effects['orderList/GetTaskList'],
    }))(ReportFormComponent),
    true,
    true
) 
 

export default ReportForm;

